<template>
  <a-modal
    :title="'数据导出'"
    :visible="loadVisible"
    width="415px"
    height="290px"
    centered
    @cancel="handleCancel"
  >
    <p class="prompt-information">数据将导出到本地</p>
    <a-row class="row" style="margin-bottom: 12px;">
      <a-col :span="6" style="line-height: 32px;" class="label">
        文件名称:
      </a-col>
      <a-col :span="18" style="line-height: 32px;">
        <a-input v-model="name" placeholder="请输入..." allow-clear />
      </a-col>
    </a-row>
    <a-row class="row">
      <a-col :span="6" style="line-height: 32px;" class="label">
        文件类型:
      </a-col>
      <a-col :span="18" style="line-height: 32px;">
        <a-select v-model="exportType" style="width: 100%;">
          <a-select-option value="csv">
            csv
          </a-select-option>
          <a-select-option value="shapefile" disabled>
            shapefile
          </a-select-option>
        </a-select>
      </a-col>
    </a-row>
    <a-row class="row">
      <a-col :span="8" style="line-height: 32px;" class="label">
        导出geom字段:
      </a-col>
      <a-col :span="16" style="line-height: 32px;">
        <a-radio-group v-model="exportGeom">
          <a-radio :value="1">
            是
          </a-radio>
          <a-radio :value="0">
            否
          </a-radio>
        </a-radio-group>
      </a-col>
    </a-row>

    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        取消
      </a-button>
      <a-button
        key="submit"
        :loading="loading"
        type="primary"
        @click="handleOk"
      >
        确定
      </a-button>
    </template>
  </a-modal>
</template>

<script lang="ts">
/**
 * 图层管理-图层数据导出
 */
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { baseURL } from '@/api/axios-config'

@Component({
  components: {},
})
export default class LayerExportPopup extends Vue {
  // 项目id
  @Prop({ type: Number, default: 0 }) projectId!: number
  @Prop({ type: Number }) tabId!: number
  // modal 可见
  @Prop({ type: Boolean, default: false }) loadVisible!: boolean
  @Prop({
    type: Object,
    default: () => {
      return {}
    },
  })
  exportLayer!: any
  @Prop({ type: Number }) columnCount!: number
  public name: string = ''
  public loading: boolean = false
  public exportType: 'csv' | 'shapefile' = 'csv'
  public exportGeom: number = 0 // 是否导出 geom 字段

  @Watch('loadVisible')
  public onLoadVisible(value: boolean) {
    if (value) {
      this.name = this.exportLayer.name
    }
  }

  public handleOk() {
    if (this.columnCount === 0) {
      this.$message.warning('当前表暂无数据，无法导出')
      return
    }
    this.$emit('cancel')
    window.open(
      `${baseURL}/gis/downloadTable?projectId=${this.projectId}&layerId=${this.exportLayer.id}&name=${this.name}&format=${this.exportType}&geom=${this.exportGeom}`
    )
  }

  public handleCancel() {
    this.$emit('cancel')
  }
}
</script>

<style lang="less" scoped>
.prompt-information {
  color: rgba(34, 36, 50, 0.5);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 17px;
}
</style>
